<template>
  <div class="middle-container2" :style="{backgroundImage: bgImg, color: '#38E5DE'}">
    <div class="title-container">
      <div class="title">
        <img src="../../../assets/img/common/title_tip.png" height="16" width="16" />
        <div class="title-text">{{ title }}</div>
      </div>
      <img src="../../../assets/img/common/close-16px.png" style="cursor: pointer" @click="closeWindow" height="16"
        width="16" />
    </div>
    <div class="search-container" v-if="!showDetail">
      <span>日期：</span>
      <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" class="search-btn" @click="handleSearch">查询</el-button>
    </div>
    <div class="content-container" v-if="!showDetail">
      <!-- <diy-table :tableData="tableData" :tHeadList="tHeadList"></diy-table> -->
      <el-table :data="tableData" height="600" class="package-table-list"
        header-cell-style="background:#45A5E5;color:#fff;">
        <el-table-column label="集装箱号" prop="containerno" width="160"></el-table-column>
        <el-table-column label="来源" prop="containerowner" width="160"></el-table-column>
        <el-table-column label="装货港" prop="pol"></el-table-column>
        <el-table-column label="卸货港" prop="pod"></el-table-column>
        <el-table-column label="承运人" prop="inboundvoy"></el-table-column>
        <el-table-column label="航名航次" prop="inboundvoy"></el-table-column>
        <el-table-column label="收货人" prop="xxxx"></el-table-column>
        <el-table-column label="入港时间" prop="intime" width="160"></el-table-column>
        <el-table-column label="吨数" prop="grossweight"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template #default="scope">
            <!-- <el-button @click="handleDetail(scope.row)" type="primary" size="small">查看详情</el-button>  -->
            <el-button @click="wharfDetail(scope.row)" type="primary" size="small">详情</el-button>
            <el-button @click="$router.push({ path: '/left-menu/FrozenCargo'})" type="primary" size="small">冷冻货物详情</el-button> 
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background :pager-size="pageObj.pages" :pager-count="pageObj.size" layout="prev, pager, next"
        @current-change="handleCurrentChange" :total="pageObj.total">
      </el-pagination>
    </div>
    <!-- <div class="content-detail" v-if="showDetail1">
            <div class="detail-title">
                <span>集装箱号</span><span>FSCU39293</span>
            </div>
            <div class="detail-info">
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                        <div class="detail-desc">
                            <div class="article-sub">信息组标题</div>
                            <div class="article-list">
                                <div class="article-box">
                                    <span>货名：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>卸货港：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>箱号：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>提单号：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>进场方式：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>出场方式：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>进港船名：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>进港航次：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>进港时间：</span><span>猪肉</span>
                                </div>
                            </div>
                        </div>
                        <div class="detail-desc">
                            <div class="article-sub fixt-title">箱子信息</div>
                            <div class="article-list">
                                <div class="article-box">
                                    <span>箱尺寸：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>箱类型：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>箱高度：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>当前箱温度：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>温度类型：</span><span> C-摄氏</span>
                                </div>
                                <div class="article-box">
                                    <span>箱来源：</span><span>猪肉</span>
                                </div>
                                <div class="article-box fix-box">
                                    <span>当前在场箱的位置：</span><span>猪肉</span>
                                </div>
                                <div class="article-box fix-box">
                                    <span>提箱出场时的位置：</span><span>猪肉</span>
                                </div>
                            </div>
                        </div>
                         <div class="detail-desc">
                            <div class="article-sub fixt-title">港湾信息</div>
                            <div class="article-list">
                                <div class="article-box">
                                    <span>装货港_中文：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>卸货港_中文：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>提箱拖车：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>总重：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>货重：</span><span> C-摄氏</span>
                                </div>
                                <div class="article-box">
                                    <span>存放天数：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>海关锁：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>查验锁：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>码头锁：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>提箱进闸时间：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>提箱出闸时间：</span><span>猪肉</span>
                                </div>
                               
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="跟踪轨迹" name="second">
                         <div class="detail-desc">
                            <div class="article-sub">信息组标222题</div>
                            <div class="article-list">
                                <div class="article-box">
                                    <span>货名：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>卸货港：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>箱号：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>提单号：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>进场方式：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>出场方式：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>进港船名：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>进港航次：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>进港时间：</span><span>猪肉</span>
                                </div>
                            </div>
                        </div>
                        <div class="detail-desc">
                            <div class="article-sub fixt-title">箱子信息</div>
                            <div class="article-list">
                                <div class="article-box">
                                    <span>箱尺寸：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>箱类型：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>箱高度：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>当前箱温度：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>温度类型：</span><span> C-摄氏</span>
                                </div>
                                <div class="article-box">
                                    <span>箱来源：</span><span>猪肉</span>
                                </div>
                                <div class="article-box fix-box">
                                    <span>当前在场箱的位置：</span><span>猪肉</span>
                                </div>
                                <div class="article-box fix-box">
                                    <span>提箱出场时的位置：</span><span>猪肉</span>
                                </div>
                            </div>
                        </div>
                         <div class="detail-desc">
                            <div class="article-sub fixt-title">港湾信息</div>
                            <div class="article-list">
                                <div class="article-box">
                                    <span>装货港_中文：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>卸货港_中文：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>提箱拖车：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>总重：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>货重：</span><span> C-摄氏</span>
                                </div>
                                <div class="article-box">
                                    <span>存放天数：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>海关锁：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>查验锁：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>码头锁：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>提箱进闸时间：</span><span>猪肉</span>
                                </div>
                                <div class="article-box">
                                    <span>提箱出闸时间：</span><span>猪222肉</span>
                                </div>
                               
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="其他" name="third">其他</el-tab-pane>
                </el-tabs>
            </div>
        </div> -->
    <div class="wharf-detail" v-if="showDetail">
      <div class="detail-header-panel">
        <div class="panel-detail">
          <span>冻品名称：</span> <span>帝皇鲜 澳洲和牛M4 + 牛肉卷</span>
        </div>
        <div class="panel-detail">
          <span>原产国：</span> <span>澳大利亚</span>
        </div>
        <div class="panel-detail">
          <span>入境口岸：</span> <span>马湾</span>
        </div>
        <div class="panel-detail">
          <span>生产批号：</span> <span>2021-10-20</span>
        </div>
        <div class="panel-detail">
          <span>保质期时长：</span> <span>12月</span>
        </div>
        <div class="panel-detail fix-panel">
          <span>经营者：</span><span>深圳盒马网络科技有限公司南山区第一分公司</span>
        </div>
        <div class="panel-detail fix-panel">
          <span>溯源哈希：</span><span>9dfk239dsjkksd8923jk</span>
        </div>
      </div>
      <div class="detail-timeline-box">
        <div class="detail-timeline">
          <div class="firstLine"> </div>
          <div class="timeline-box">
            <div class="timeline" v-for="(item, index) in activities" :key="index">
              <div class="timeline-left">
                <div class="timeline-left-node"></div>
                <div class="timeline-left-line"></div>
              </div>
              <div class="timeline-card">
                <div class="card">
                  <div class="timeline-card-title">{{ item.content }}</div>
                  <div class="timeline-card-content">{{ item.timestamp }}</div>
                </div>
              </div>
              <div class="rightTimeline">
                  <div class="wharf-information">
                    <p class="wharf-information-title">码头信息</p>
                    <el-divider></el-divider>
                    <div class="wharf-information-content">
                      <el-row>
                        <el-col :span="3">入库日期</el-col>
                        <el-col :span="9">2021-10-20</el-col>
                        <el-col :span="3">生产批号</el-col>
                        <el-col :span="9">2021-10-20</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">重量</el-col>
                        <el-col :span="9">200kg</el-col>
                        <el-col :span="3">件数</el-col>
                        <el-col :span="9">100</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">供应商名称</el-col>
                        <el-col :span="9">小公司</el-col>
                        <el-col :span="3">主体性质</el-col>
                        <el-col :span="9">境内企业</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">法定代表人</el-col>
                        <el-col :span="9">掌权</el-col>
                        <el-col :span="3">联系人</el-col>
                        <el-col :span="9">李宁</el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="3">供应商地址</el-col>
                        <el-col :span="21">供应商</el-col>
                      </el-row>
                      <el-row class="lastRow">
                        <el-col :span="3">检验证明图片</el-col>
                        <el-col :span="21"> <img class="time-img" src="../../../assets/img/common/pos.png" alt="">
                        </el-col>
                      </el-row>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div class="lastLine"></div>
        </div>
      </div>
 
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, defineComponent } from "vue";
import http from "@/commons/utils/httpUtil";
import { dateFormat, UTCformat } from '../../../utils/index'
import DiyTable from "./DiyTable";
export default defineComponent({
  components: { DiyTable },
  name: 'PackageTable',
  setup() {
    const startTime = new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)
    const state = reactive({
      dateRange: [dateFormat(startTime, 'YYYY-mm-dd HH:MM'), dateFormat(new Date(), 'YYYY-mm-dd HH:MM')],
      bgImg: 'url(' + require('../../../assets/img/common/middle-bg.png') + ')',
      title: '集装箱列表',
      tableData: [],
      tHeadList: [
        {
          label: "集装箱号",
          prop: "containerno",
        },
        {
          label: "来源",
          prop: "containerowner",
        },
        {
          label: "装货港",
          prop: "pol",
        },
        {
          label: "卸货港",
          prop: "pod",
        },
        {
          label: "承运人",
          prop: "inboundvoy",
        },
        {
          label: "航名航次",
          prop: "inboundvoy",
        },
        {
          label: "收货人",
          prop: "xxxx",
        },
        {
          label: "入港时间",
          prop: "intime",
        },
        {
          label: "吨数",
          prop: "grossweight",
        }
        // {
        //     label:"操作",
        //     prop: ''
        // }
      ],
      pageObj: {
        pages: 1,
        size: 10,
        total: 0
      },
      total: 0,
      showDetail: false,
      activeName: "first",
      activities: [
        {
          content: '码头信息',
          timestamp: '2018-04-15',
        },
        {
          content: '码头信息',
          timestamp: '2018-04-13',
        },
        {
          content: '码头信息',
          timestamp: '2018-04-11',
        },
      ]
    })
    const handleSearch = () => {
      state.dateRange = [dateFormat(state.dateRange[0]), dateFormat(state.dateRange[1])]
      getTableData()
    }
    const closeWindow = () => {
      if (state.showDetail) {
        state.title = '集装箱列表'
        state.showDetail = !state.showDetail
      } else {
        window.AC.HideWindow(6, {});
      }
    }
    const getTableData = () => {
      // const interFace = `/large/queryContainerList/${state.dateRange[0]}/${state.dateRange[1]}/${ state.pageObj.size}/${state.pageObj.pages}`
      const interFace = `/JSON/table.json`
      http.get(interFace).then(res => {
        if (res.data.records && res.data.records.length) {
          state.tableData = res.data.records
          state.tableData.forEach(item => {
            if (item.intime) {
              item.intime = UTCformat(item.intime)
            }
            if (item.grossweight) {
              item.grossweight = item.grossweight * 1000 / 1000000
            }
          })
          state.pageObj.pages = res.data.pages
          state.pageObj.total = res.data.total
        }
      }).catch(err => {
        console.log(err)
      })
    }
    const handleCurrentChange = (val) => {
      console.log(`当前页 ${val}`);
      state.pageObj.pages = val
      // 切换每页的数据 传入当前页
      getTableData()
    }
    const handleDetail = (row) => {
      console.log(row)
      state.showDetail = !state.showDetail
    }
    const wharfDetail = (row) => {
      // let page_name = 'B'
      // let value = row
      // goWharfDetail(page_name, value)
      console.log(row, row.cargoDesc);
      state.showDetail = !state.showDetail
      state.title = '溯源列表详情页'
    }
    // const goWharfDetail = (page_name, value) => {
    //     router.push({
    //         name:page_name,
    //         params: {
    //             value:value
    //         }
    //     })
    // }
    getTableData()
    return {
      ...toRefs(state),
      handleSearch,
      closeWindow,
      handleCurrentChange,
      handleDetail,
      wharfDetail
    }
  }
})
</script>
<style>
.middle-container2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 800px;
  width: calc(1200px - 48px);
  padding-left: 24px;
  padding-right: 24px;
  z-index: 10;
}
.title-container {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #38e5ed;
}
 
.title {
  display: inline-flex;
  align-items: center;
}
 
.title-text {
  margin-left: 5px;
}
.search-container {
  position: relative;
  color: #fff;
  margin: 20px 0;
  text-align: left;
}
.search-btn {
  margin-left: 15px;
  width: 100px;
}
.content-container {
  height: 600px;
  /* overflow-y: scroll; */
}
.el-table,
.package-table-list {
  background: rgba(69, 165, 229, 0.3) !important;
  color: #fff;
}
.el-table tr {
  background: none !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  color: #333 !important;
}
.el-table__body tr.hover-row.current-row > td.el-table__cell,
.el-table__body
  tr.hover-row.el-table__row--striped.current-row
  > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
.el-table__body tr.hover-row > td.el-table__cell {
  color: #333 !important;
}
.el-pagination {
  position: relative;
  margin: 20px auto;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background: none;
  color: #afafaf;
  border: 1px solid #7c7c7c;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #00d5ff;
  color: #fff;
}
 
.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: #fff;
  background-color: #45a5e5;
  font-weight: bold;
}
 
.el-tabs__active-bar {
  background-color: #4684ae;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #fff;
}
.el-tabs__item {
  font-size: 16px;
  color: #ffffff;
}
 
.detail-desc .article-sub {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  text-align: left;
  margin-bottom: 20px;
  position: relative;
}
.el-tab-pane {
  position: relative;
  padding: 25px 30px;
  color: #fff;
}
.article-list {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.article-box {
  flex: 0 0 calc(100% / 3);
  margin-bottom: 20px;
  text-align: left;
}
.article-box span:first-child {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}
.article-box span:last-child {
  font-size: 14px;
  color: #ffffff;
}
.fix-box {
  flex: 0 0 100%;
}
.fixt-title {
  margin-top: 20px;
}
.detail-title {
  position: relative;
  margin: 20px 0 20px;
  text-align: left;
}
.detail-title span {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}
.detail-title span:last-child {
  font-size: 14px;
  color: #ffffff;
  position: relative;
  font-weight: normal;
  margin-left: 18px;
}
.wharf-detail {
  padding: 40px 62px 40px;
  height: 550px;
}
.detail-header-panel {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  flex-wrap: wrap;
}
.panel-detail {
  position: relative;
  margin-right: 50px;
  margin-bottom: 15px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}
.panel-detail span:last-child {
  font-size: 14px;
  color: #ffffff;
}
.fix-panel {
  flex: 0 0 100%;
  text-align: left;
}
.detail-timeline-box {
  width: 1013px;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 20px;
  /* border: 1px solid red; */
}
.detail-timeline {
  display: flex;
  position: absolute;
  width: 1030px;
  /* height:px; */
  height: 100%;
  overflow: auto;
  /* border: 1px solid #000; */
}
.timeline-box {
  margin-top: 50px  ;
  width: 100%;
  height: 100%;
}
.firstLine {
  position: fixed;
  z-index: 2;
  margin-left: 99px;
  width: 4px;
  height: 50px;
  border-radius: 7px;
  background-color: #02cff8;
}
.lastLine {
  position: fixed;
  z-index: 2;
  margin-left: 86px;
  bottom: 5%;
  left: 99px;
  width: 4px;
  height: 50px;
  border-radius: 7px;
  background-color: #02cff8;
}
.el-divider {
  background-color: #3f6987;
}
.el-divider--horizontal {
  margin: 0;
  width: 97%;
}
.el-row {
  height: 38px;
  line-height: 38px;
}
.wharf-information{
    height: 400px;
}
.wharf-information-title {
  text-align: left;
  margin-bottom: 10px !important;
  color: #01d2fa;
  font-weight: 700;
}
.wharf-information-content {
  padding: 15px;
  height: auto;
  text-align: left;
  color: #8a8f93;
  margin-bottom: 30px;
}
.time-img {
  width: 121px;
  height: 148px;
  margin-top: 10px;
  text-align: left;
}
.lastRow {
  height: auto;
}
/* 时间线 */
.timeline {
  padding-left: 100px;
  height: 80%;
  display: flex;
}
.timeline-left {
  margin-right: 5px;
  height: 100%;
}
.timeline-left-node {
  z-index: 5;
  position: relative;
  bottom: -25px;
  left: -6px;
  width: 15px;
  height: 15px;
  background-color: rgb(8, 223, 205);
  border-radius: 50%;
}
.timeline-left-line {
  position: relative;
  bottom: 15px;
  height: 100%;
  border-left: 2px solid rgb(78, 107, 236);
}
/* .timeline-left-line:first-child:before{
      height: 20px;
      width: 3px;
      background-color: #343d45;
  } */
.timeline-card {
  height: 80%;
  position: absolute;
  left: 0px;
  width: 94px;
}
.card {
  background-color: #00d5ff;
  color: #fff;
  font-size: 12px;
  padding-left: 8px;
  text-align: left;
  width: 70px;
  margin-top: 15px;
  /* border-top-right-radius: 4px;
   border-bottom-right-radius: 4px; */
}
.card::after {
  position: absolute;
  content: "";
  left: 78px;
  top: 15px;
  border-color: transparent transparent transparent #00d5ff;
  border-style: solid;
  border-width: 18px 0px 19px 21px;
}
.timeline-card-title {
  font-size: 14px;
  margin-bottom: 4px;
}
.timeline-card-content {
  /* padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px 1px lightgray; */
  margin-bottom: 20px;
  padding-bottom: px;
}
.rightTimeline {
  flex: 1;
  height: 400px;
  margin-top: -50px;
}
</style>
